<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />

    <title>Web Storage API example</title>

    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="wrapper">
      <h1>本地存储</h1>

      <p>
        This example is designed to demonstrate usage of the
        <a href="http://dev.w3.org/html5/webstorage/">W3C Web Storage API</a>.
        It should work as far back as IE8. Choose custom background colours,
        logos and fonts from the below drop down menus, then try closing and
        reopening the page — you will find that your choices are remembered, as
        they are stored using Web Storage. You can also visit the
        <a href="event.html" target="_blank">storage event output</a> (opens in
        new tab). Open this, change some values in the index page, then look at
        the events page — you'll see the storage changes reported.
      </p>

      <form>
        <div>
          <label for="bgcolor">选择背景颜色:</label>
          <input class="color" id="bgcolor" type="color" />
        </div>
        <div>
          <label for="font">选择字体:</label>
          <select id="font">
            <option value="'Open Sans Condensed', sans-serif" selected>
              Sans-serif
            </option>
            <option value="'Bitter', serif">Serif</option>
            <option value="'Ubuntu Mono'">Monospace</option>
          </select>
        </div>
        <div>
          <label for="image">选择图片:</label>
          <select id="image">
            <option value="images/tortoise.png">Tortoise</option>
            <option value="images/firefoxos.png">Firefox</option>
            <option value="images/crocodile.png">Crocodile</option>
          </select>
        </div>
      </form>

      <footer></footer>
      <img src="images/firefoxos.png" />
    </div>
  </body>
  <script>
    /* 实现功能 */
    const $ = (selector) => document.querySelector(selector);

    const bgColorInput = $("#bgcolor");
    const fontSelect = $("#font");
    const imageSelect = $("#image");
    const body = document.body;
    const p = $("body > div.wrapper > p");
    const img = $("body > div.wrapper > img");
    const key = "settings";

    // 优化从界面input/select元素上读取数据
    const getSettingsFromInput = () => {
      return {
        bgcolor: bgColorInput.value,
        font: fontSelect.value,
        image: imageSelect.value,
      };
    };
    // 渲染
    const render = (settings) => {
      const { bgcolor, font, image } = settings;
      body.style.backgroundColor = bgcolor;
      p.style.fontFamily = font;
      img.src = image;

      bgColorInput.value = bgcolor;
      fontSelect.value = font;
      imageSelect.value = image;
    };

    const handleChange = () => {
      const settings = getSettingsFromInput();
      render(settings);

      localStorage.setItem(key, JSON.stringify(settings));
    };
    function loadSettings() {
      const settings =
        JSON.parse(localStorage.getItem(key)) || getSettingsFromInput();

      render(settings);
    }
    bgColorInput.onchange = handleChange;
    fontSelect.onchange = handleChange;
    imageSelect.onchange = handleChange;

    loadSettings();
  </script>
</html>
